<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      style="width: 651px; margin: 0 auto"
    >
      <el-table-column prop="aim" label="毕业去向" width="80px">
      </el-table-column>
      <el-table-column prop="item" label="" width="150px"> </el-table-column>
      <el-table-column label="本科生">
        <el-table-column prop="bach_num" label="人数" width="65px">
        </el-table-column>
        <el-table-column prop="bac_percent" label="比例" width="80px">
        </el-table-column>
      </el-table-column>
      <el-table-column label="硕士生">
        <el-table-column prop="mas_num" label="人数" width="65px">
        </el-table-column>
        <el-table-column prop="mas_percent" label="比例" width="80px">
        </el-table-column>
      </el-table-column>
      <el-table-column label="总体">
        <el-table-column prop="sum_num" label="人数" width="70px">
        </el-table-column>
        <el-table-column prop="sum_percent" label="比例" width="80px">
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ["myStart", "myEnd"],
  data() {
    return {
      start: this.myStart,
      end: this.myEnd,
      tableData: [],
    };
  },
  created() {
    if (!this.start || !this.end) {
      this.axios({
        url: "grad/yearList",
        methods: "get",
      }).then((res) => {
        let years = res.data.data;

        years = years.sort(function (a, b) {
          return a - b;
        });

        //默认为最近一年
        this.start = years[years.length - 1];
        this.end = years[years.length - 1];
        this.get_direction(this.start, this.end);
      });
    } else {
      this.get_direction(this.start, this.end);
    }
  },
  methods: {
    get_direction(start, end) {
      this.axios({
        url: "grad/direction",
        method: "get",
        params: {
          start: start,
          end: end,
        },
      })
        .then((res) => {
          console.log(res.data.data);
          var bachelor = this.count_kind(res.data.data.bachelor);
          var master = this.count_kind(res.data.data.master);
          var sum = [];
          var bac_percent = [];
          var mas_percent = [];
          var sum_percent = [];
          for (var i in bachelor) {
            sum.push(bachelor[i] + master[i]);
            bac_percent.push(
              ((bachelor[i] / bachelor[0]) * 100).toFixed(2) + " %"
            );
            mas_percent.push(((master[i] / master[0]) * 100).toFixed(2) + " %");
            sum_percent.push(
              (
                ((bachelor[i] + master[i]) / (bachelor[0] + master[0])) *
                100
              ).toFixed(2) + " %"
            );
          }
          var title = [
            "升学",
            "就业",
            "未就业",
            "国内",
            "出国（出境）",
            "协议和合同就业",
            "其他录用形式就业",
          ];
          // 组织数据
          var table = [];
          for (var i = 0; i < 5; i++) {
            var temp = {
              aim: "1",
              item: "1",
              bach_num: "1",
              mas_num: "1",
              sum_num: "1",
              bac_percent: "1",
              mas_percent: "1",
              sum_percent: "1",
            };
            table[i] = temp;
          }

          // 升学
          for (let i = 0; i < 2; i++) {
            table[i].aim = title[0];
            table[i].item = title[i + 3];
            table[i].bach_num = bachelor[i + 4];
            table[i].mas_num = master[i + 4];
            table[i].sum_num = sum[i + 4];
            table[i].bac_percent = bac_percent[i + 4];
            table[i].mas_percent = mas_percent[i + 4];
            table[i].sum_percent = sum_percent[i + 4];
          }
          //  就业
          for (let i = 2; i < 4; i++) {
            table[i].aim = title[1];
            table[i].item = title[i + 3];
            table[i].bach_num = bachelor[i + 4];
            table[i].mas_num = master[i + 4];
            table[i].sum_num = sum[i + 4];
            table[i].bac_percent = bac_percent[i + 4];
            table[i].mas_percent = mas_percent[i + 4];
            table[i].sum_percent = sum_percent[i + 4];
          }
          // 未就业
          table[4].aim = title[2];
          table[4].item = title[2];
          table[4].bach_num = bachelor[3];
          table[4].mas_num = master[3];
          table[4].sum_num = sum[3];
          table[4].bac_percent = bac_percent[3];
          table[4].mas_percent = mas_percent[3];
          table[4].sum_percent = sum_percent[3];
          this.tableData = table;
          console.log(this.tableData);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else if (rowIndex === 2) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else if (rowIndex === 4) {
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    count_kind(data) {
      var job_onwork = 0; //签就业协议
      var bound_study = 0; //境内升学
      var aborad = 0; //出国出境
      var flexible = 0; //其他录用形式就业
      var nl = 0;
      var sum = 0;
      for (var i in data) {
        var cur = data[i]["term"];
        var num = data[i]["num"];
        if (cur == "签就业协议形式就业") {
          job_onwork += num;
        } else if (cur == "签劳动合同形式就业") {
          job_onwork += num;
        } else if (cur == "出国、出境") {
          aborad += num;
        } else if (cur == "境内升学") {
          bound_study += num;
        } else if (cur == null) {
          nl += num;
        } else if(cur == "其他录用形式就业") {
          flexible += num;
        }
        sum += num;
      }
      var study = bound_study + aborad;
      var job = job_onwork + flexible;
      return [sum, study, job, nl, bound_study, aborad, job_onwork, flexible];
    },
  },
};
</script>

<style scope>
.panel-group {
  margin-top: 5%;
  height: 20%;
  width: 100%;
  margin-bottom: 10%;
}
.panel-group .table-panel-col {
  margin-bottom: 32px;
}
.panel-group .table-panel {
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  width: 200px;
}
.panel-group .table-panel .table-panel-description {
  float: right;
  font-weight: bold;
  margin: 26px;
  margin-left: 0px;
}

.panel-group .table-panel .table-panel-text {
  line-height: 18px;
  color: rgba(0, 0, 0, 1);
  font-size: 20px;
  margin-bottom: 10px;
}
</style>
